<!-- 意见反馈 -->
<template>
	<view class="page">
		<u-input v-model="postList.content" :customStyle="style1" type="textarea" height="300" :clearable="false"
			:placeholder="placeholder" />
		<u-upload :custom-btn="true" :action="action" max-count="2" width="116" height="116" @on-remove="onRemove" @on-Success="onSuccess" name="path" :header="header" file-list="fileList">
			<view slot="addBtn" style="width: 116rpx;height: 116rpx;">
				<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/my/tianjiaimg.png" mode=""></image>
			</view>
		</u-upload>
		<view class="button flex justify-center align-center" @click="submit">
			提 交
		</view>
		<view v-if="show" class="layer flex justify-center align-center flex-column">
			<view class="warp">
				<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/my/tangchuang.png" mode=""></image>
			</view>
			<view class="ok flex justify-center align-center" @click="ok">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				placeholder: '请详细描述您的问题，我们将及时进行解决。（添加截图有助于我们解决您的问题，添加选择图片后将自动上传。）',
				value: '',
				style1: {
					'padding': '10rpx'
				},
				show: false,
				action: 'https://shanfu.51fnt.com/attentionList/uploadPicture',
				path: {
					path: 'path'
				},
				header: {
					'Content-Type': 'formData'
				},
				fileList: [],
				postList:{
					imageList:[],
					content:''
				}
				
			}
		},
		methods: {
			//提交
			submit() {
				if(this.postList.content.length > 0){
					this.$post('/user/feedBack',this.postList).then(()=>{
						this.show = true
					})
				}else{
					uni.showToast({
						title:'内容不能为空',
						icon: 'none'
					})
				}
				
				
			},
			//弹窗确认按钮
			ok(){
				this.show = false
				uni.navigateBack({
					delta: 1
				})
			},
			onSuccess(res, index, lists){
				//页面上定义的临时存放图片的对象，提示也保存后台返回的图片名称
				if(res){
					// let currentFile = {};
					// currentFile.image = res.data.picture[0];
					// currentFile.type = 0;
					// //成功上传一个图片就往fileList里面添加一个图片对象
					console.log(res.data.picture[0].url)
					this.postList.imageList.push(res.data.picture[0].url);
					//this.form.pictureUrl为后台图片字段来保存字符串类型的图片集合
				}
			},
			//删除一张图片的回调，lists这是成功删除一个图片后，还剩余的图片集合
			onRemove(data, lists){	
				this.fileList.splice(data,1)
				this.postList.imageList.splice(data,1)
			},
		}
	}
</script>

<style lang="scss">
	.page {
		position: relative;
		padding: 0 30rpx;
		.button {
			width: 690rpx;
			height: 84rpx;
			background: #0265EB;
			border-radius: 42rpx;
			margin: 200rpx auto 0;
			color: #ffffff;
			font-weight: bold;
			font-size: 32rpx;
			box-shadow: 0px 10rpx 10rpx rgba(12,108,240, .4);
		}

		.layer {
			position: absolute;
			top: 0;
			left: 0;
			background: rgba(0,0,0,0.6);
			width: 100%;
			min-height: 100vh;
			z-index: 1000;
			.warp {
				width: 623rpx;
				height: 413rpx;

				image {
					width: 623rpx;
					height: 413rpx;
				}
			}

			.ok {
				width: 176rpx;
				height: 56rpx;
				background: #FFFFFF;
				border-radius: 28rpx;
				font-weight: bold;
				color: #333333;
				font-size: 32rpx;
				margin-top: 30rpx;
			}
		}
	}
</style>
